﻿@model List<Comment>
@using LiteBlog
@{
    this.ViewBag.Title = "Manage comments";
    this.Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var comments = new Comments();
            comments.loadJson(@Html.Json(Model));
            ko.applyBindings(comments, document.getElementById("main"));
        });
    </script>
}

<div id="main" class="hidden" data-bind="css: {hidden: false}">
    <h1>Comments</h1>
    <div>
        <input type="button" value="Delete" data-bind="click: deleteComments, enable: deleteEnabled" />
        <input type="button" value="Approve" data-bind="click: approveComments, enable: rejectEnabled" />
        <input type="button" value="Reject" data-bind="click: rejectComments, enable: rejectEnabled" />
    </div>
    <div class="success" data-bind="visible: successMessage, text: successMessage">
    </div>
    <div class="error" data-bind="visible: errorMessage, html: errorMessage">
    </div>
    <table class="grid">
        <thead>
            <tr>
                <th style="width: 6%"><input type="checkbox" data-bind="checked: selectAll, click: select" /></th>
                <th style="width: 12%">Edit</th>
                <th style="width: 16%">Time</th>
                <th style="width: 24%">Commenter</th>
                <th style="width: 42%">Comment</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: collection">
            <tr data-bind="visible: !isEdit(), css: { alternateRow: !isOdd() }">
                <td style="text-align: center"><input type="checkbox" data-bind="checked: selected, click: select" /></td>
                <td style="text-align: center">
                    <a href="#" data-bind="click: edit">Edit</a><br />
                    <a class="cutebtn" data-bind="visible: !isApproved()">UNAPPROVED</a>
                </td>
                <td style="text-align: center" data-bind="text: time"></td>
                <td>
                    <span data-bind="text: name"></span><br />
                    <span data-bind="text: ip"></span><br />
                    <span><a href="#" target="_blank" data-bind="text: url, attr: {href: url}"></a></span>
                </td>
                <td data-bind="html: body"></td>
            </tr>
            <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                <td colspan="5">
                    <div class="form" style="width: 80%">
                        <div class="left" style="width: 20%">
                            Name:
                        </div>
                        <div class="right" style="width: 70%">
                            <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" />
                        </div>
                        <div class="clear"></div>
                        <div class="left" style="width: 20%">
                            Url:
                        </div>
                        <div class="right" style="width: 70%">
                            <input type="text" data-bind="value: url" />
                        </div>
                        <div class="clear"></div>
                        <div class="left" style="width: 20%">
                            Comment:
                        </div>
                        <div class="right" style="width: 70%">
                            <textarea data-bind="value: body, valueUpdate: 'afterkeydown', css: { 'errorBox': body.hasError }" style="width: 90%" rows="5"></textarea>
                        </div>
                        <div class="clear"></div>
                        <div class="left" style="width: 20%">
                            Author:
                        </div>
                        <div class="right">
                            <input type="checkbox" data-bind="checked: isAuthor" />
                        </div>
                        <div class="clear"></div>
                        <div style="text-align: center">
                            <a href="#" data-bind="click: update">Update</a>
                            <a href="#" data-bind="click: close">Close</a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
